<template>
	<el-dialog title="选择商品" width="800px" :visible.sync="dialogVisible">
		<el-form ref="form" :rules="rules" :model="form" label-width="80px">
			<el-form-item label="盲盒名称" prop="title">
				<el-input v-model="form.title"></el-input>
			</el-form-item>
			<el-form-item label="盲盒图片" prop="img">
				<crop-upload show-type="photo" :init-val="form.img" file-size="100K" wrapper-width="95px"
					wrapper-height="95px" @setVal="(val) => setUrl(val)" />
			</el-form-item>
			<el-form-item label="盲盒套餐" prop="meal">
				<el-checkbox-group v-model="form.meal">
					<el-checkbox label="史诗" @change="epicChange">
						史诗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<label v-show="epicShow">盲盒几率：<el-input v-model="form.title"
								style="width: 80px;margin-right: 20px;"></el-input></label>
					</el-checkbox><br />
					<el-checkbox label="神话" @change="mythologyChange">
						神话&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<label v-show="mythologyShow">盲盒几率：<el-input v-model="form.title"
								style="width: 80px;margin-right: 20px;"></el-input></label>
					</el-checkbox><br />
					<el-checkbox label="传说" @change="legendChange">
						传说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<label v-show="legendShow">盲盒几率：<el-input v-model="form.title"
								style="width: 80px;margin-right: 20px;"></el-input></label>
					</el-checkbox><br />
					<el-checkbox label="典藏" @change="collectionChange">
						典藏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<label v-show="collectionShow">盲盒几率：<el-input v-model="form.title"
								style="width: 80px;margin-right: 20px;"></el-input></label>
					</el-checkbox><br />
					<el-checkbox label="普通" @change="ordinaryChange">
						普通&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<label v-show="ordinaryShow">盲盒几率：<el-input v-model="form.title"
								style="width: 80px;margin-right: 20px;"></el-input></label>
					</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="售价" prop="price">
				<el-input v-model="form.price"></el-input>
			</el-form-item>
			<el-form-item label="销量" prop="sell_num">
				<el-input v-model="form.sell_num"></el-input>
			</el-form-item>
			<el-form-item label="排序" prop="sort">
				<el-input-number v-model="form.sort"></el-input-number>
			</el-form-item>
			<el-form-item label="连抽类型" prop="type">
				<el-checkbox-group v-model="form.type" @change="handleCheckAllChange">
					<el-checkbox label="一连抽"></el-checkbox>
					<el-checkbox label="三连抽"></el-checkbox>
					<el-checkbox label="五连抽"></el-checkbox>
					<el-checkbox label="十连抽"></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="dialogVisible = false">取 消</el-button>
			<el-button size="small" type="primary" @click="submit">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {
		insertBox
	} from '@/api/audit'
	import cropUpload from '@/components/cropUpload'
	export default {
		components: {
			cropUpload
		},
		data() {
			return {
				checked: '',
				dialogVisible: false,
				form: {
					title: '',
					img: '',
					price: '',
					sell_num: '',
					sort: '',
					price: '',
					type: [],
					meal: []
				},
				meal: [],
				epicShow: false,
				mythologyShow: false,
				legendShow: false,
				collectionShow: false,
				ordinaryShow: false,
				rules:{
					title:[{ required: true, message: '请输入盲盒名称', trigger: 'blur' }]
				}
			}
		},
		created() {
			var obj={}
			console.log(obj);
		},
		methods: {
			handleCheckAllChange(e) {
				this.checked = e.toString()
			},
			setUrl(val) {
				this.form.img = val
				this.$emit('setUrl', val)
			},
			epicChange(e) {
				if (e == true) {
					this.epicShow = true
				} else {
					this.epicShow = false
				}
			},
			mythologyChange(e) {
				if (e == true) {
					this.mythologyShow = true
				} else {
					this.mythologyShow = false
				}
			},
			legendChange(e) {
				if (e == true) {
					this.legendShow = true
				} else {
					this.legendShow = false
				}
			},
			collectionChange(e) {
				if (e == true) {
					this.collectionShow = true
				} else {
					this.collectionShow = false
				}
			},
			ordinaryChange(e) {
				if (e == true) {
					this.ordinaryShow = true
				} else {
					this.ordinaryShow = false
				}
			},
			submit() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.form.type = this.form.type.toString()
						insertBox(this.form).then(res => {
							this.dialogVisible = false
							this.$emit('getList')
						})
					} else {
						this.$message({
							message: '请检查表单错误',
							type: 'error'
						})
						return false
					}
				})
			}
		}
	}
</script>

<style>
</style>
